<template>
	<view class="page-content">
		<!-- 切换选项 -->
		<view>
			<view class="tab-box flex-between">
				<view v-for="(item,index) in tabArr" :key="index" class="tab-item"
					:class="selectType == item.id ? 'selectActive' : ''" @click="clickTab(item)">{{item.name}}</view>
			</view>
		</view>
		<!-- 日期按钮 -->
		<view class="flex-between">
			<!-- 开始日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="startpicker" @change="startDateConfirm"
						:end="startRangeDate">{{startDateValue}}<image src="../../../static/wallet/triangle.png" mode="" style="width: 8px;height: 7px;margin-left: 10px;"></image></uni-datetime-picker>
				</view>
			</view>
			
			<!-- 结束日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="endpicker" @change="endDateConfirm"
						:end="lastDate" :start="endRangeDate">{{endDateValue}}<image src="../../../static/wallet/triangle.png" mode="" style="width: 8px;height: 7px;margin-left: 10px;"></image></uni-datetime-picker>
				</view>
			</view>
		</view>

		<!-- 总共 统计 -->
		<view class="total-box flex-start" style="font-weight: 600;font-size: 15px;padding: 15px;">
			<text style="margin-left:5px;" v-if="selectType!=3">收入：</text>
			<text v-if="selectType!=3" style="margin-right:20px;">{{incomeTotal}}</text>
			<text v-if="selectType!=2">支出：</text>
			<text v-if="selectType!=2">{{expenditureTotal}}</text>
		</view>
		<!-- 列表 -->
		<view class="list-box">
			<!-- <scroll-view type="list" scroll-y style="height:calc(100vh - 300px);margin-top:0px;margin-bottom: 5px;"> -->
			<view style="min-height:calc(100vh - 500px);">
				<view class="list-item" style="margin: 0;padding: 7px;margin-bottom: 20px;"
					v-for="(item,index) in list" @click="toDetailInfo(item)">
					<view class="flex-between" style="align-items: center;margin-bottom: 10px;">
						<view class="flex-start" style="align-items: center;">
							<view style="font-weight: 600;margin-right: 10px;">{{item.cause}}</view>
							<view v-if="item.status==1">
								<image src="../../../static/wallet/income.png" mode=""
									style="width: 21px;height: 21px;transform: translateY(2px);" />
							</view>
							<view v-else>
								<image src="../../../static/wallet/expenditure.png" mode=""
									style="width: 21px;height: 21px;transform: translateY(2px);" />
							</view>
						</view>
						<view style="font-weight: 600;">
							{{item.first_amount}}
						</view>
					</view>


					<view class="flex-between" style="align-items: center;font-size: 13px;">
						<view>
							<text>余额：{{item.balance}}</text>
						</view>
						<view>
							<text>{{item.first_create_time}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import {
		get_wallet_detail
	} from '@/utils/siteAccountApi/index.js'
	//转换日期格式
	const formatDate = function(dateValue, format) {
		var date = new Date(dateValue);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? ('0' + m) : m;
		var d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		var h = date.getHours();
		var minute = date.getMinutes();
		minute = minute < 10 ? ('0' + minute) : minute;
		let time = y + '-' + m + '-' + d
		if (format == 'MM-DD') {
			time = m + '-' + d
		}
		if (format == 'MM') {
			time = m
		}
		if (format == 'YY-MM') {
			time = y + '/' + m
		}
		if (format == 'YY-MM-DD') {
			time = y + '-' + m + '-' + d
		}
		if (format == 'YY-MM-DD HH:mm') {
			time = y + '/' + m + '/' + d + ' ' + h + ':' + minute
		}
		return time
	}
	/* 时间yyyy-MM-dd HH:mm:ss转为时间戳 */
	const timeToTimestamp = (time) => {
		let timestamp = Date.parse(new Date(time).toString());
		return timestamp;
	}

	var finalDate = formatDate(timeToTimestamp(new Date()))

	console.log(finalDate);
	export default {
		data() {
			return {
				selectType: 1,
				incomeTotal: 0,
				expenditureTotal: 0,
				list: [{
						name: '鱼获结算到账',
						type: 1,
						time: '2024-07-29 12:44',
						total: '1860.00',
						num: 311.0
					}
				],

				startDateValue: '开始日期',
				endDateValue: '结束日期',

				startpicker: '',
				endpicker: '',
				//最终日期
				lastDate: finalDate,
				startRangeDate: finalDate,
				endRangeDate:'2023-09-09',
				tabArr: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '收入'
					},
					{
						id: 3,
						name: '支出'
					}
				],
				
				//接口返回的数据 
				apiResult:{}

			}
		},
		methods: {
			clickTab(item) {
				let id = item.id
				this.selectType = id
				
			
				if(this.selectType==1){
					this.list=this.apiResult[2].all_data
				}
				if(this.selectType==2){
					this.list=this.apiResult[3].income_data
				}
				if(this.selectType==3){
					this.list=this.apiResult[4].expend_data
				}
			},


			startDateClose() {
				console.log('弹窗关闭');
			},
			endDateClose() {
				console.log('弹窗关闭');
			},

			startDateConfirm(e) {

				this.startDateValue = e
			},
			endDateConfirm(e) {

				this.endDateValue = e

			},
			searchList() {
				let data={
					start_date:this.startDateValue=='开始日期'?'':this.startDateValue,
					end_date:this.endDateValue=='结束日期'?'':this.endDateValue
				}
				get_wallet_detail(data).then(res => {
					if(res.code==200){
						this.incomeTotal=res.data[0].income
						this.expenditureTotal=res.data[1].expend
						this.apiResult=res.data
						if(this.selectType==1){
							this.list=res.data[2].all_data
						}
						if(this.selectType==2){
							this.list=res.data[3].income_data
						}
						if(this.selectType==3){
							this.list=res.data[4].expend_data
						}
					}
					
				})
			},
			
			toDetailInfo(item){
				let payment_id=item.payment_id
				uni.navigateTo({
				url: `/pages/fashingSite/siteAccount/incomeDetailDetail?payment_id=${payment_id}`
				});
			}


		},
		
		onReady() {
			
			this.searchList()
		},
		watch: {
			endDateValue(newValue, oldValue) {
				console.log(newValue)
				if (newValue != '结束日期') {
					this.startRangeDate = newValue
					if (this.startDateValue != '开始日期') {
						this.searchList()
					}
				}
			},
			startDateValue(newValue, oldValue) {
				if (newValue != '开始日期') {					
					this.endRangeDate = newValue			
					if (this.endDateValue != '结束日期') {
						this.searchList()
					}
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page-content {
		background: #F3F4F6;
		height: 100vh;
		box-sizing: border-box;
	}

	.selectActive {
		color: #E61010;
		border-bottom: 3px solid #E61010;
	}

	/* .total-box */
	.tab-box {
		background: #fff;
	}

	.tab-item {
		padding: 15px 35px;
		padding-bottom: 10px;
		font-weight: 600;
		margin-bottom: 10px;
		font-size: 15px;
	}

	.date-item {
		border-top: 1px solid #ccc;
		text-align: center;
		font-weight: 600;
		padding: 15px 0;
		background-color: #fff;
	}

	.list-box {
		background: #fff;
		box-sizing: border-box;
		padding: 7px;
	}
</style>